<template>
	<div class="background">
		<van-image
	    :src="require('../img/desktop.jpeg')" />  	
		<!-- width="100%" 
		height="100%" -->
	</div>
	
	<div style="margin-top: 100px;" class="front">
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  <div>
				 <van-image
				   round
				   width="10rem"
				   height="10rem"
				   src="https://cos.mybonbon.cn/image/20211103110435fb13b1b023f24013a00bf21704ac3be3.PNG"
				 /> 
			  </div>
			  
			  <div>
			  	<h1>欢迎来到 友氧圈</h1>			
			  </div>
			  
			  <div>
				  <van-form @submit="onSubmit">
				    <van-cell-group inset>
				      <van-field
				        v-model="user.phone"
				        
				        label="手机号"
				        :rules="[{ required: true, message: '请填写手机号' }]"
				      />
				      <van-field
				        v-model="user.password"
				        type="password"
				        
				        label="密码"
				        :rules="[{ required: true, message: '请填写密码' }]"
				      />
				    </van-cell-group>
				    <div style="margin: 16px;">
				      <van-button round block type="primary" @click="login()">
				        登录
				      </van-button>
				    </div>
				  </van-form>
			  </div>
			  
			  <div style="margin-top: 16px;">
				  <van-row>
				    <van-col span="8"><router-link to="/register">注册账号</router-link></van-col>
				    <van-col span="8"></van-col>
				    <van-col span="8"><router-link to="/findpass">忘记密码?</router-link></van-col>
				  </van-row>
			  </div>
		  </van-col>
		 <van-col span="2"></van-col>
		</van-row>
	</div>
</template>

<script>
	import { ref } from 'vue';
	
	import {Toast} from "vant";
	
	export default {
	  setup() {
		  
	  },
	  data(){
		  return{

			  user:{
			  	phone:"",
			  	password:"",
		      },
		  }
	  },methods:{
		  //实现账号的登录
		  login(){
			  var that=this;
			  this.axios.post("auth/login",this.user).then((res) => {
			  console.log(res)
			  if(res.data.code==200){
				  //更新令牌
				  this.$store.commit("setToken",res.data.data);
				  //成功，跳转到主页
				  Toast.success('登录成功');
				  this.$router.push("/my")
			  }else{
				  Toast({
				    message: '亲，手机号或密码错误！',
				    icon: 'close',
				  });
			  }
			 }) 
		  }
	  }
	};
</script>

<style>
	.background{
	    width:100%;  
	    height:100%;  /**宽高100%是为了图片铺满屏幕 */
	    z-index:-1;
	    position: absolute;
	}
	 
	.front{
	    z-index:1;
	    position: absolute;
	}
</style>
